<%@ page language="java" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>
<head>
    <base href="<%=basePath %>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 强制浏览器使用最新的内核，解决了bootstrap在IE兼容模式下无法使用的问题 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>栏目</title>
    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="static/admin/css/bootstrap/css/bootstrap-3-3-5.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="static/util/plugins/layui/css/layui.css"/>

    <script type="text/javascript" src="static/js/jquery1-11-3.min.js"></script>
    <script type="text/javascript" src="static/util/js/bootstrap3-3-5.min.js"></script>
    <script type="text/javascript" src="static/util/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="static/admin/js/catalogTreeJquery.js"></script>
    <script type="text/javascript">
        var layer;
        var loading;
        $(function () {
            //加载弹出层组件
            layui.use('layer', function () {
                layer = layui.layer;
                layer.config({skin: 'layui-layer-molv',});
                //初始化栏目树的js
                catalogInit("<%=request.getAttribute("caid")%>");
            });
        });
        function FListajax(id) {
            //显示加载动态图标
            showLoading();
            $.ajax({
                type: "get",
                url: "admin/website/catalog/cataloglist",
                data: {
                    "parentId": id
                },
                success: function (result) {
                    if (result == null || result == "") {
                        OutMessageBox("数据获取失败，请重试!", 5);
                    } else {
                        $("#right").html(result);
                    }
                    loadingClose();
                }
            });
        }
        function OutMessageBox(content, time) {
            layer.msg(content, {time: time});
        }

        function showLoading() {
            loading = layer.load(1, {time: 10 * 1000, shade: [0.6, '#424242']});
        }

        function loadingClose() {
            layer.close(loading);
        }
    </script>

</head>
<body>
<div class="container-fluid">
    <div class="row" id="a">

        <div class="col-xs-3 col-sm-3 col-md-3" id="left">
            <div class="tree well">
                <ul style="-webkit-padding-start: 40px">
                    <%=request.getAttribute("catalogTreeDom")%>
                </ul>
                <br/> <br/>
                <button onclick='FListajax("root")' class="btn btn-info"
                        style="margin-left: 30px">显示主栏目
                </button>
            </div>
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9" id="right"
             style="border:solid 1px #999999;height:735px;">
            <!-- content in the div -->
        </div>
    </div>
</div>
</body>
</html>

